<template>
  <a-modal
    :width="700"
    title="选规格"
    :visible="Visible"
    @cancel="handleCancel"
    :closable="true"
    :maskClosable="false"
  >
    <template slot="footer">
      <a-button v-if="!changeOrNo" key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button key="submit" type="primary" @click="submitForm">
        {{ changeOrNo === false ? "加入购物车" : "保存修改" }}
      </a-button>
    </template>
    <div class="guigetitle">
      <div class="title">
        菜品：{{ item.itemName }} <a-divider type="vertical" />￥{{ seleprice }}
      </div>
      <div class="manyoutter">
        <img @click="jian" class="manyicon" src="@/assets/jian.png" alt="" />
        <div class="many">{{ num }}</div>
        <img class="manyicon" @click="add" src="@/assets/jia.png" alt="" />
      </div>
    </div>
    <div v-for="it in item.more" :key="it.title" class="guigeContent">
      <a-divider orientation="left">
        {{ it.title }}
      </a-divider>
      <a-button
        size="large"
        v-for="i in it.option"
        :key="i.name"
        :class="i.name === it.choose ? 'selecontentItem' : 'unSelecontentItem'"
        @click="choose(it, i)"
      >
        {{ i.name }}
      </a-button>
    </div>
  </a-modal>
</template>

<script>
import {
  change,
  doTaoCan,
  clearShopCar,
  dofood,
  getRightmenu,
  commitOrder,
  chooseTable,
  changeTable,
  getTable,
} from "@/api/buy";
export default {
  data() {
    return {
      Visible: false,
      item: { more: [{}, {}] },
      num: 1,
      i: {},
      changeOrNo: false,
      menu:[]
    };
  },
  computed: {
    seledescri() {
      let descri = "";
      this.item.more.map((item) => {
        descri += `${item.choose}+`;
      });
      return descri.slice(0, descri.length - 1);
    },
    seleprice() {
      let price = this.item.price;
      this.item.more.map((item) => {
        price += item.addprice;
      });
      return price;
    },
  },
  methods: {
    show(item) {
      this.item = item;
      this.num=1
      this.Visible = true;
    },
    choose(it, i) {
      it.choose = i.name;
      it.addprice = i.addprice;
      it.itemNo = i.itemNo;
    },
    submitForm() {
      let one=this.item
      let fdes=this.seledescri
      if (this.seledescri.indexOf("+") == -1) {
          fdes= this.seledescri + "+"
      }
      if (this.changeOrNo == true) {
        let des=this.i.descri
        if (this.i.descri.indexOf("+") == -1) {
          des= this.i.descri + "+"
        }
        console.log({itemNo:one.itemNo,name:fdes,oldname:des,num:this.num})
        change({itemNo:one.itemNo,name:fdes,oldname:des,num:this.num,price:this.seleprice+""}).then(res=>{
          //先把原来减为0，如果没改变那么就会把Num加回去，如果不是则新增，这里的one是因为当改变时的Item并不是那个真正的child,所以要拿到真的child
          this.menu[this.i.grandKey].child[this.i.parentKey].num -= this.i.num;
          this.i.num = 0;
          one=this.menu[this.i.grandKey].child[this.i.parentKey]
          this.addCar(one)
        })
      }else{
        if(one.guige===true){
          dofood({itemNo:one.itemNo,method:"add",num:this.num,detail:fdes}).then(res=>{
            this.addCar(one)
          })
        }else{
          doTaoCan({comboNo:one.itemNo,method:"add",num:this.num,name:this.seledescri,price:this.seleprice+""}).then(res=>{
            this.addCar(one)
          })
        }
      }

    },
    addCar(one){
      one.num += this.num;
      if (
        !one.kids.some((i) => {
          if (i.descri === this.seledescri) {
            i.num += this.num;
            return true;
          }
        })
      ) {
        //瞬间凝结这时的选择,切断与面板的item的联系
        let fuitem=JSON.parse(JSON.stringify(one))
        fuitem.kids=[]
        one.kids.push({
          guige:one.guige,
          combo:one.combo,
          itemName: one.itemName,
          itemNo:one.itemNo,
          num: this.num,
          price: this.seleprice,
          descri: this.seledescri,
          grandKey:one.parentKey,
          parentKey:one.key,
          item:fuitem
        });
      }
      this.changeOrNo=false
      this.Visible = false;
    },
    handleCancel() {
      this.Visible = false;
      this.changeOrNo=false
    },
    add() {
      this.num++;
    },
    jian() {
      if (this.num > 1) {
        this.num--;
      }
    },
    change(i,menu) {
      this.Visible = true;
      this.i = i;
      this.num = i.num;
      this.menu=menu
      this.changeOrNo = true;
      // 以免点击切换以后把原来变为0的项的more选项切换掉，一个套餐child里的kid如果是3×3则有9个项，这9个项各自有item是当初的more的choose，他们不可变
      //只在初次加入时被赋值，以后都不需要再改变，由于vue都是地址传递，所以两次深复制很有必须，切断与这个Item选项的联系
      this.item=JSON.parse(JSON.stringify(i.item))
    },
  },
};
</script>

<style scoped>
.guigetitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.title {
  font-size: 28px;
  font-weight: 900;
}
.manyoutter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.manyicon {
  height: 40px;
  width: 40px;
}
.many {
  font-size: 24px;
  font-weight: 900;
  margin: 0 8px;
}
.guigeContent {
  padding: 5px;
  margin: 15px 0;
}
.selecontentItem {
  display: inline-block;
  border-radius: 10px;
  margin: 0 15px;
  background: rgb(44, 44, 44);
  color: white;
  font-weight: 900;
  font-size: 25px;
}
.unSelecontentItem {
  display: inline-block;
  border-radius: 10px;
  margin: 0 15px;
  background: rgb(222, 222, 222);
  color: rgb(110, 110, 110);
  font-weight: 900;
  font-size: 25px;
}
</style>
